<template>
  <div>
    <van-nav-bar
      fixed
      placeholder
      safe-area-inset-top
      title="订单详情"
      @click-left="back"
    >
      <template #left>
        <van-icon name="arrow-left" size="16px" color="#333" />
      </template>
    </van-nav-bar>
    <img class="banner" src="../../assets/orderbanner02.png" alt="" />
    <div class="step">
      <div class="topstep">
        <div
          :class="
            order.status == '2' || order.status == '3' || order.status == '7'
              ? 'num active'
              : 'num'
          "
        >
          1
        </div>
        <div
          :class="
            order.status == '3' || order.status == '7'
              ? 'space active'
              : 'space'
          "
        />
        <div
          :class="
            order.status == '3' || order.status == '7' ? 'num active' : 'num'
          "
        >
          2
        </div>
        <div :class="order.status == '7' ? 'space active' : 'space'" />
        <div :class="order.status == '7' ? 'num active' : 'num'">3</div>
      </div>
      <div class="bottomstep">
        <div
          :class="
            order.status == '2' || order.status == '3' || order.status == '7'
              ? 'words activewords'
              : 'words'
          "
        >
          进行中
        </div>
        <div
          :class="
            order.status == '3' || order.status == '7'
              ? 'words activewords'
              : 'words'
          "
        >
          待反馈
        </div>
        <div :class="order.status == '7' ? 'words activewords' : 'words'">
          已完结
        </div>
      </div>
    </div>
    <div class="cell">
      <div>订单编号</div>
      <div>{{ order.trustSn }}</div>
    </div>
    <div class="cell">
      <div>订单名称</div>
      <div v-if="order.trustType == '1'">房源录入</div>
      <div v-if="order.trustType == '2'">交割服务</div>
      <div v-if="order.trustType == '3'">交易服务</div>
      <div v-if="order.trustType == '4'">金融服务</div>
      <div v-if="order.trustType == '5'" class="er">
        <span>基础服务包</span>带看服务(二手房)
      </div>
      <div v-if="order.trustType == '6'">新房咨询单</div>
      <div v-if="order.trustType == '7'">新房带看服务单</div>
    </div>
    <div class="cell">
      <div>下单时间</div>
      <div>
        {{ time }}
      </div>
    </div>
    <div class="cell">
      <div>服务时间</div>
      <div>{{ time2 }}</div>
    </div>
    <!-- <div class="cell">
      <div>结束时间</div>
      <div>{{ order.finishTime }}</div>
    </div> -->
    <div class="info">
      <div v-show="order.gainUserId == 0" class="name">
        正在为您匹配经纪人
        <div style="flex: 1" />
      </div>
      <div v-show="order.gainUserId != 0" class="name">
        经纪人{{ order.gainUsername }}<span>经纪人</span>
        <div style="flex: 1" />
        <van-icon size="20px" name="phone-o" @click="callagent" />
      </div>
      <!-- <div class="name">
        X先生(女士)<span>业主</span>
        <div style="flex: 1"></div>
        <van-icon name="phone-o" />
      </div> -->
      <div>
        <van-image
          width="95px"
          height="80px"
          lazy-load
          :src="order.image"
          fit="cover"
          radius="5px"
          style="margin-right: 10px"
        />
        <div>
          <div>{{ order.subdistrict }}</div>
          <div>地址:{{ order.address }}</div>
          <div>
            <div>
              <div>
                挂牌价<span>{{ price/10000 }}万元/㎡</span>
              </div>
              <!-- <div>限 价<span>15800元/㎡</span></div> -->
            </div>
            <div>
              <div>
                总价<span>{{ order.listedPrice }}万</span>
              </div>
              <!-- <div>总价<span>95万</span></div> -->
            </div>
          </div>
        </div>
      </div>
    </div>
    <div v-show="order.status == '7'" class="cell">
      <div>服务完成</div>
      <div>是</div>
    </div>
    <div
      v-show="order.status == '2' || order.status == '3'"
      class="cell"
      @click="showcomplete = true"
    >
      <div>服务完成</div>
      <div>{{ value }}</div>
    </div>
    <!-- <div v-show="!order.isEvaluate && showeva" class="cell" @click="toeva"> -->
    <div class="cell" v-show="!order.isEvaluate">
      <div>服务评价</div>
      <!-- <div>去评价<van-icon name="arrow" /></div> -->
    </div>
    <div v-show="order.isEvaluate" class="cell">
      <div>服务评价</div>
      <div>{{ order.evaluate }}分</div>
    </div>
    <div class="popup" v-if="show">
      <!-- <div class="topshow">
          <van-icon size="22px" name="cross" @click="show = false" /><span
            >您对本次服务满意吗？</span
          ><span class="sure" @click="evaluate">确定</span>
        </div> -->
      <div class="cell">
        <div>服务效率</div>
        <div><van-stepper v-model="value1" integer min="1" max="10" /></div>
      </div>
      <div class="cell">
        <div>服务态度</div>
        <div><van-stepper v-model="value2" integer min="1" max="10" /></div>
      </div>
      <div class="cell">
        <div>服务准时</div>
        <div><van-stepper v-model="value3" integer min="1" max="10" /></div>
      </div>
      <div class="cell">
        <div>专业素养</div>
        <div><van-stepper v-model="value4" integer min="1" max="10" /></div>
      </div>
      <div class="cell">
        <div>服务形象</div>
        <div><van-stepper v-model="value5" integer min="1" max="10" /></div>
      </div>
      <div class="bottompart" />
      <div class="words">
        <div>*如您在服务结束24小时内未反馈将默认已完成服务</div>
        <div>*如您未在服务结束24小时内作出评价默认评分为45分(满分50分)</div>
      </div>
    </div>
    <div
      v-show="
        order.trustType == '2' ||
        order.trustType == '3' ||
        order.trustType == '4'
      "
      class="bigcell"
    >
      <div>
        <div>服务费用</div>
        <div>总额</div>
      </div>
      <div>
        <div>
          <div class="intpart">{{ order.listedPrice }}</div>
          <div class="word">实际成交额(万)</div>
        </div>
        <div>*</div>
        <div>
          <div class="intpart">{{ order.ratio }}%</div>
          <div class="word word2">&emsp;费用比例&emsp;</div>
        </div>
        <div>=</div>
        <div>
          <div class="intpart">
            {{ (order.listedPrice * order.ratio) / 100 }}
          </div>
          <div class="word">支付费用(万)</div>
        </div>
      </div>
    </div>
    <div
      v-show="
        order.trustType == '2' ||
        order.trustType == '3' ||
        order.trustType == '4'
      "
      class="showmoney dai"
    >
      <div>
        <div><img src="../../assets/service03.png" alt="" />服务费用</div>
        <!-- <button @click="tocomplaint">申请退款</button> -->
      </div>
      <div>
        <div>
          <div class="tbox">{{ order.listedPrice * order.ratio * 100 }}元</div>
          <div class="bbox">已支付</div>
        </div>
        <!-- <div>
          <div class="tbox">0.00元</div>
          <div class="bbox">待补差</div>
        </div>
        <div>
          <div class="tbox">0.00元</div>
          <div class="bbox">待退款</div>
        </div> -->
      </div>
    </div>
    <div v-show="order.trustType == '1'" class="showmoney">
      <div>
        <div><img src="../../assets/service01.png" alt="" />服务费用</div>
      </div>
      <div>
        <div class="bbox">房源录入相关服务0费用！</div>
      </div>
    </div>
    <div
      v-show="order.trustType == '6' || order.trustType == '7'"
      class="showmoney"
    >
      <div>
        <div><img src="../../assets/service01.png" alt="" />服务费用</div>
      </div>
      <div>
        <div class="bbox">新房相关服务0费用！可向经济人要求优惠价！</div>
      </div>
    </div>
    <!-- <div>
        <div>
          <div class="tbox">0.00元</div>
          <div class="bbox">待补差</div>
        </div>
        <div>
          <div class="tbox">0.00元</div>
          <div class="bbox">待退款</div>
        </div>
      </div> -->
    <div v-show="order.trustType == '5'" class="showmoney">
      <div class="dai">
        <div><img src="../../assets/service01.png" alt="" />带看服务包1次</div>
        <div>
          <div class="tbox">0.01元</div>
          <div class="bbox">已支付</div>
        </div>
        <!-- <button @click="tocomplaint">申请退款</button> -->
      </div>
    </div>
    <div class="call">
      <img
        src="@/assets/call.png"
        alt=""
        width="12px"
        style="margin-right: 3px"
      /><a style="color: #45b7cb" href="tel:4000007173">联系客服</a>
    </div>
    <!-- <div class="tipwords">
      <div>*如未最终成交可申请部分退款</div>
      <div>
        *请按实际金额填写，核查不符经纪人将停止服务，由此造成损失将由您承担
      </div>
    </div> -->
    <div v-show="order.status == '2' || order.status == '3'" class="btn">
      <button @click="complete">提 交</button>
    </div>
    <van-popup
      v-model="showcomplete"
      :style="{ height: '40%' }"
      position="bottom"
      @close="onclose"
    >
      <van-picker
        show-toolbar
        title="服务完成"
        :columns="columns"
        visible-item-count="4"
        @confirm="onConfirm"
        @cancel="onCancel"
      />
    </van-popup>
  </div>
</template>

<script>
import { grabOrderInfo, orderEvaluate, orderComplete } from "../../apis/user";
import { baseUtils } from "@/utils/baseUtils";
export default {
  data() {
    return {
      isFinish: false,
      show: false,
      value1: "9",
      value2: "9",
      value3: "9",
      value4: "9",
      value5: "9",
      trustId: "",
      order: {},
      price: "",
      showcomplete: false,
      columns: ["是", "否"],
      value: "请选择",
      showeva: false,
      time: "",
      time2: "",
    };
  },
  created() {
    this.trustId = this.$route.query.trustId;
    grabOrderInfo({ trustId: this.trustId }).then((res) => {
      console.log("order:", res);
      if (res.code == 201) {
        this.order = res.result;
        this.time = res.result.createTime == "" ? "" : res.result.createTime;
        this.time2 =
          res.result.expectedTime == "" ? "" : res.result.expectedTime;
        this.price = (
          (res.result.listedPrice / res.result.coveredArea) *
          10000
        ).toFixed(2);
      }
    });
  },
  beforeUpdate() {
    if (this.value == "是") {
      this.showeva = true;
    } else if (this.value == "否") {
      this.$router.push({ path: "/complaint" });
    }
  },
  methods: {
    back() {
      this.$router.go(-1);
    },
    onclose() {
      this.showcomplete = false;
    },
    onConfirm(value) {
      this.value = value;
      if (value == "是") {
        this.show = true;
        this.isFinish = true;
      } else {
        this.isFinish = false;
      }
      this.showcomplete = false;
    },
    onCancel() {
      this.showcomplete = false;
    },
    // toeva() {
    //   if (this.order.status == "3") {
    //     this.show = true;
    //   } else {
    //     this.$toast("请提交订单后再进行评价");
    //   }
    // },
    evaluate() {
      const _this = this;
      // this.$dialog
      //   .confirm({
      //     message: "是否确认提交服务评价",
      //   })
      //   .then(() => {
      orderEvaluate({
        trustId: this.$route.query.trustId,
        serviceEfficiency: this.value1,
        serviceAttitude: this.value2,
        servicesOnTime: this.value3,
        specialtyLiteracy: this.value4,
        serviceImage: this.value5,
      }).then((res) => {
        console.log("orderEvaluate", res);
        if (res.code == 200) {
          // _this.show = false;
          grabOrderInfo({ trustId: _this.trustId }).then((res) => {
            if (res.code == 201) {
              _this.order = res.result;
              _this.price = (
                (res.result.listedPrice / res.result.coveredArea) *
                10000
              ).toFixed(2);
            }
          });
        }
      });
      // })
      // .catch(() => {});
    },
    complete() {
      const _this = this;
      if (_this.isFinish) {
        _this.$dialog
          .confirm({
            message: "是否确认订单完成",
            messageAlign: "left",
          })
          .then(() => {
            orderComplete({ trustId: _this.trustId }).then((res) => {
              console.log("orderComplete", res);
              if (res.code == 200) {
                _this.$toast.success("提交成功");
                // this.show = true;
                _this.evaluate();
                grabOrderInfo({ trustId: _this.trustId }).then((res) => {
                  console.log("grabOrderInfo", res);
                  if (res.code == 201) {
                    _this.order = res.result;
                    _this.price = (
                      (res.result.listedPrice / res.result.coveredArea) *
                      10000
                    ).toFixed(2);
                    _this.$dialog
                      .alert({
                        title: "温馨提示",
                        message:
                          "感谢使用暖暖房屋！省时省心更省钱！ 即将返回个人中心",
                        confirmButtonColor: "#45b7cb",
                        theme: "round-button",
                        messageAlign: "left",
                      })
                      .then(() => {
                        _this.$router.push("/home/me");
                      });
                  }
                });
              }
            });
          })
          .catch(() => {});
      } else {
        _this.$toast("请先评价");
      }
    },
    callagent() {
      window.location.href = `tel:${this.order.gainUserMobile}`;
    },
    tocomplaint() {
      this.$router.push({ path: "/complaint" });
    },
  },
};
</script>

<style lang="less" scoped>
.btn {
  padding: 20px 0 15px;
  border-top: 1px solid #f1f1f1;
  margin-top: 30px;
  button {
    border: none;
    border-radius: 20px;
    height: 40px;
    width: 90%;
    color: #fff;
    background-image: linear-gradient(to bottom right, #6fccdd, #49b9cd);
    display: block;
    margin: auto;
  }
}
.dai {
  display: flex;
  justify-content: space-between;
  align-items: center;
  & > div:nth-child(2) {
    display: flex;
    flex-direction: column;
  }
}
.er {
  align-items: baseline !important;
  span {
    font-size: 12px;
    margin-right: 5px;
  }
}
.banner {
  width: 100%;
}
.step {
  margin: 0 70px;
  .topstep {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 15px;
    margin-bottom: 10px;
    .num {
      text-align: center;
      width: 25px;
      height: 25px;
      line-height: 30px;
      background-color: #ccc;
      color: #fff;
      border-radius: 50%;
    }
  }
  .space {
    flex: 1;
    height: 5px;
    background-color: #ccc;
  }
  .bottomstep {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
    .words {
      font-size: 13px;
      color: #999;
    }
  }
  .active {
    color: #fff !important;
    background-color: #45b7cb !important;
  }
  .activewords {
    color: #45b7cb !important;
  }
}
.cell {
  margin: 0 15px;
  padding: 15px 0;
  border-bottom: 1px solid #f1f1f1;
  display: flex;
  justify-content: space-between;
  color: #333;
  > div {
    display: flex;
    align-items: center;
    &:first-child {
      font-weight: bold;
    }
  }
}
.bigcell {
  > div {
    &:first-child {
      margin: 0 15px;
      padding: 15px 0;
      display: flex;
      justify-content: space-between;
      color: #333;
      div {
        &:first-child {
          font-weight: bold;
        }
      }
    }
    &:nth-child(2) {
      display: flex;
      margin: 0 15px;
      justify-content: space-between;
      align-items: center;
      text-align: center;
      .word {
        font-size: 13px;
        color: #999;
      }
      .word2 {
        padding: 0 5px;
      }
      .intpart {
        font-weight: bold;
        border: 1px solid #ddd;
        padding: 3px 0;
        margin-bottom: 5px;
      }
    }
  }
}
.info {
  > div {
    display: flex;
    margin: 15px;
    align-items: center;
    justify-content: space-around;
    &:last-child {
      > img {
        width: 95px;
        height: 80px;
        margin-right: 10px;
      }
      > div {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        color: #333;
        height: 80px;
        > div {
          &:first-child {
            font-size: 16px;
          }
          &:nth-child(2) {
            font-size: 14px;
          }
          &:nth-child(3) {
            font-size: 14px;
            display: flex;
            justify-content: space-between;
            span {
              color: #d43b33;
            }
          }
        }
      }
    }
  }
  .name {
    color: #333;
    span {
      color: #fff;
      font-size: 10px;
      background-color: #45b7cb;
      padding: 0 5px;
      border-radius: 10px;
      margin-left: 3px;
    }
    .van-icon {
      color: #45b7cb;
    }
  }
}
.call {
  text-align: center;
  font-size: 12px;
  color: #45b7cb;
  margin-top: 10px;
}
.tipwords {
  font-size: 12px;
  color: #999;
  margin: 15px;
  padding-bottom: 90px;
}
.showmoney {
  margin: 15px;
  padding: 15px;
  background-color: #f7f8fa;
  > div {
    display: flex;
    justify-content: space-between;
    align-items: center;
    &:first-child {
      div {
        color: #333;
        font-weight: bold;
        display: flex;
        align-items: center;
        img {
          width: 16px;
          height: 16px;
          margin-right: 5px;
        }
      }
      button {
        padding: 2px 10px;
        border-radius: 10px;
        border: 1px solid #ccc;
        color: #ccc;
        font-size: 12px;
        background-color: #fff;
      }
    }
    &:last-child {
      margin-top: 10px;
      text-align: center;
      .tbox {
        font-weight: bold;
        color: #333;
      }
      .bbox {
        font-size: 14px;
        color: #999;
      }
    }
  }
}
.btnpart {
  position: fixed;
  bottom: 0px;
  left: 0px;
  width: 100%;
  z-index: 100;
  padding: 10px 0;
  border-top: 1px solid #f1f1f1;
  background-color: #fff;
  text-align: center;
  button {
    border: none;
    border-radius: 20px;
    height: 40px;
    width: 90%;
    color: #fff;
    background-image: linear-gradient(to bottom right, #6fccdd, #49b9cd);
  }
  .safe {
    padding-bottom: constant(safe-area-inset-bottom);
    padding-bottom: env(safe-area-inset-bottom);
  }
}
.popup {
  .topshow {
    display: flex;
    justify-content: space-between;
    padding: 10px;
    border-bottom: 1px solid #f1f1f1;
    span {
      font-size: 15px;
      color: #999;
    }
    .sure {
      font-size: 18px;
      color: #45b7cb;
    }
  }
  .words {
    margin: 10px 15px;
    > div {
      font-size: 12px;
      color: #999;
    }
  }
  .bottompart {
    height: 20px;
  }
}
</style>
